google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(function(){
  var data = new google.visualization.DataTable();
       data.addColumn('string', '日');
       data.addColumn('number', 'DL数');
       data.addColumn('number', 'Googleセルラン');
       data.addColumn('number', 'iOSセルラン');
       data.addColumn({type:'string', role:'annotation'});
       data.addColumn({type:'string', role:'annotationText'});
       data.addRows([
        ['2022-06-09',513234,14,54,null,null],
['2022-06-10',513405,20,78,null,null],
['2022-06-11',513405,20,96,null,null],
['2022-06-12',513887,25,81,null,null],
['2022-06-13',515315,34,87,null,null],
['2022-06-14',515361,43,109,null,null],
['2022-06-15',515651,48,6,null,null],
['2022-06-16',515651,29,9,null,null],
['2022-06-17',515687,28,17,null,null],
['2022-06-18',515687,12,30,null,null],
['2022-06-19',517771,11,43,null,null],
['2022-06-20',517771,10,51,null,null],
['2022-06-21',517771,10,62,null,null],
['2022-06-22',519013,12,63,null,null],
['2022-06-23',519013,15,7,null,null],
['2022-06-24',519916,18,10,null,null],
['2022-06-25',519916,18,17,null,null],
['2022-06-26',519916,18,25,null,null],
['2022-06-27',521276,14,33,null,null],
['2022-06-28',521659,14,53,null,null],
['2022-06-29',521659,14,64,null,null],
['2022-06-30',522427,14,73,null,null],
['2022-07-01',522677,14,11,null,null],
['2022-07-02',522958,17,16,null,null],
['2022-07-03',522958,16,23,null,null],
['2022-07-04',523371,16,32,null,null],
['2022-07-05',523657,15,53,null,null],
['2022-07-06',523838,15,59,null,null],
['2022-07-07',524080,15,45,null,null],
['2022-07-08',524243,14,50,null,null],
['2022-07-09',524481,14,33,null,null],
['2022-07-10',524915,24,36,null,null],
['2022-07-11',525281,26,46,null,null],
['2022-07-12',525697,26,61,null,null],
['2022-07-13',526236,26,70,null,null],
['2022-07-14',526566,27,84,null,null],
['2022-07-15',526566,29,91,null,null],
['2022-07-16',526859,31,12,null,null],
['2022-07-17',526859,24,16,null,null],
['2022-07-18',527714,18,25,null,null],
['2022-07-19',527857,18,43,null,null],
['2022-07-20',528202,18,69,null,null],
['2022-07-21',528202,18,75,null,null],
['2022-07-22',528292,16,123,null,null],
['2022-07-23',528964,16,156,null,null],
['2022-07-24',529080,21,144,null,null],
['2022-07-25',530249,50,134,null,null],
['2022-07-26',530284,66,29,null,null],
['2022-07-27',531529,37,38,null,null],
['2022-07-28',532265,30,45,null,null],
['2022-07-29',532321,22,56,null,null],
['2022-07-30',534139,20,2,null,null],
['2022-07-31',536004,11,4,null,null],
['2022-08-01',537637,6,12,null,null],
['2022-08-02',539090,6,18,null,null],
['2022-08-03',540284,7,21,null,null],
['2022-08-04',541764,6,33,null,null],
['2022-08-05',541764,6,40,null,null],
['2022-08-06',542620,6,42,null,null],
['2022-08-07',543628,6,51,null,null],
['2022-08-08',544884,18,42,null,null]
        ]);
  var options = {
    chartArea: {'width':'85%', 'height':'65%', 'left':60 },
    'pointSize': 3,
    legend: {position: 'top' },
    vAxes:[
      {direction:1},
      {direction:-1,viewWindow:{min:0,max:200}}
    ],
    series: {
      0:{
        type: 'bars',
        color: 'skyblue',
        targetAxisIndex: 0,
      },
      1:{
        type: 'line',
        color: 'seagreen',                
        targetAxisIndex: 1,
      },
      2:{
        type: 'line',
        color: 'red',                
        targetAxisIndex: 1,
      },
    },
    tooltip: { trigger: 'both' },
    focusTarget: 'category',
    colors:['#2980b9','#e74c3c']
  };
  var chart = new google.visualization.ComboChart(document.getElementById('graphField'));
  chart.draw(data, options);
  
  google.visualization.events.addListener(chart, 'click', function() {
    if(chart.getSelection()[0]){
      chart.setSelection(null)
    }
  });


});